<style scoped>
  .echarts {
    width: calc(100vw - 320px);
    height: calc(100vh - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .el-main {
    margin-left: 0;
    padding: 0;
    height: calc(100vh - 40px);
  }

</style>
<template>
  <el-main>
    <div class='echarts' ref='soil'></div>
  </el-main>
</template>
<script>
  export default {
    data() {
      return {
        sets:{
          phMax:0,
          phMin:0,
          phUnit:'',
          humidityMax:0,
          humidityMin:0,
          humidityUnit:'',
          temperatureMax:0,
          temperatureMin:0,
          temperatureUnit:'',
          maxRecord:0
        },
        data: {
          createTimes:[],
          soilHumiditys:[],
          soilPHs:[],
          soilTemps:[]
        },
        option: {
          title: {
            text: '土壤环境'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['温度', '湿度', 'PH']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: true},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [{
            name: '温度',
            type: 'line',
            data: [],
            markLine: {
              data: [
                {name: '温度上限', yAxis: 0},
                {name: '温度下限', yAxis: 0}
              ]
            }
          },
            {
              name: '湿度',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '湿度上限', yAxis: 0},
                  {name: '湿度下限', yAxis: 0}
                ]
              }
            },
            {
              name: 'PH',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: 'PH上限', yAxis: 0},
                  {name: 'PH下限', yAxis: 0}
                ]
              }
            }
          ]
        }
      }
    },
    mounted() {
      const that = this;
      let temp;
      //获取后台设置的参数
      this.$http.get(that.$url + 'getParameters')
        .then(function (response) {
          temp = response.data;
          that.sets.maxRecord = temp.maxrecord;
          const parametersLen = temp.parameters.length;
          for(let i = 0;i < parametersLen;i++){
            switch(temp.parameters[i].id){
              case 'soilhumidity':
                that.sets.humidityMax = temp.parameters[i].max;
                that.sets.humidityMin = temp.parameters[i].min;
                that.sets.humidityUnit = temp.parameters[i].unit;
                break;
              case 'soilph':
                that.sets.phMax = temp.parameters[i].max;
                that.sets.phMin = temp.parameters[i].min;
                that.sets.phUnit = temp.parameters[i].unit;
                break;
              case 'soiltemp':
                that.sets.temperatureMax = temp.parameters[i].max;
                that.sets.temperatureMin = temp.parameters[i].min;
                that.sets.temperatureUnit = temp.parameters[i].unit;
                break;
            }
          }

          console.log(that.sets);
          //获取数据
	      that.$http.get(that.$url + 'getRecentDayData')
	        .then(function (response) {
	          that.data.createTimes = response.data.createTimes;
	          that.data.soilTemps = response.data.soilTemps;
	          that.data.soilPHs = response.data.soilPHs;
	          that.data.soilHumiditys = response.data.soilHumiditys;


	          //设置数据
	          //x轴
		      that.option.xAxis.data.push(...that.data.createTimes.slice(0,that.sets.maxRecord));
		      that.data.createTimes.splice(0,that.sets.maxRecord);
		      //温度
		      that.option.series[0].data.push(...that.data.soilTemps.slice(0,that.sets.maxRecord));
		      that.data.soilTemps.splice(0,that.sets.maxRecord);
          that.option.series[0].formatter += that.sets.temperatureUnit;
		      that.option.series[0].markLine.data[0].yAxis = that.sets.temperatureMax;
		      that.option.series[0].markLine.data[1].yAxis = that.sets.temperatureMin;
		      //湿度
		      that.option.series[1].data.push(...that.data.soilHumiditys.slice(0,that.sets.maxRecord));
		      that.data.soilHumiditys.splice(0,that.sets.maxRecord);
          that.option.series[1].formatter += that.sets.humidityUnit;
		      that.option.series[1].markLine.data[0].yAxis = that.sets.humidityMax;
		      that.option.series[1].markLine.data[1].yAxis = that.sets.humidityMin;
		      //湿度
		      that.option.series[2].data.push(...that.data.soilPHs.slice(0,that.sets.maxRecord));
		      that.data.soilHumiditys.splice(0,that.sets.maxRecord);
		      that.option.series[2].markLine.data[0].yAxis = that.sets.phMax;
		      that.option.series[2].markLine.data[1].yAxis = that.sets.phMin;

		      let myChart = that.$echarts.init(that.$refs.soil);
		      myChart.setOption(that.option);
		      
		      
		      setInterval(function () {
		        if (that.option.xAxis.data.length > that.sets.maxRecord) {
		          that.option.xAxis.data.splice(0, that.option.xAxis.data.length - that.sets.maxRecord);
		          that.option.series[0].data.splice(0, that.option.series[0].data.length - that.sets.maxRecord);
		          that.option.series[1].data.splice(0, that.option.series[1].data.length - that.sets.maxRecord);
		          that.option.series[2].data.splice(0, that.option.series[2].data.length - that.sets.maxRecord);
		        }
		        
		        that.option.xAxis.data.push(that.data.createTimes.shift());
		        that.option.series[0].data.push(that.data.soilTemps.shift());
		        that.option.series[1].data.push(that.data.soilHumiditys.shift());
		        that.option.series[2].data.push(that.data.soilPHs.shift());

		        myChart.setOption(that.option);
		      }, 1000);
		      
	        })
	        .catch(function (error) {
	          that.$message({
	            message: '获取数据失败',
	            type: 'error'
	          });
	        });

        })
        .catch(function (error) {
          that.$message({
            message: '获取数据失败',
            type: 'error'
          });
        });


    },
    methods: {
      updataData() {

      }
    }
  }

</script>
